<template>
  <Editor v-model="content" :init="initOptions" />
</template>

<script setup>
import { ref } from 'vue'
import Editor from '@tinymce/tinymce-vue'

// TinyMCE 核心
import 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'tinymce/models/dom'

// 插件
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/help'

// 样式 (❗必须在这里全局 import，而不是 <style scoped>)
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/content/default/content.css'

const content = ref('<p>Hello TinyMCE</p>')

const initOptions = {
  height: 500,
  menubar: true,
  plugins: 'lists link image table code wordcount',
  toolbar:
    'undo redo | formatselect | bold italic underline | ' +
    'alignleft aligncenter alignright | bullist numlist | link image table ',

  // 关键：关闭默认路径查找
  skin: false,
  branding: false,
  statusbar: false,
  promotion: false, 
  menubar: false,
  content_css: false
}
</script>
